{extend name="../admin/common/base" /}
{block name="body"}
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li  class="layui-this" ><a href="{:url('friends/index')}">粉丝列表</a></li>
        <li><a href="{:url('friends/tabList')}">标签管理</a></li>
    </ul>
    <div class="layui-tab-content"></div>
</div>
<form action="" class="layui-form" method="get">
<div class="layui-form-item">
    <div class="layui-inline">
            <label class="layui-form-label">呢称：</label>
            <div class="layui-input-block">
                <input type="text" name="nickname" value="{$post.nickname}" placeholder="请输入呢称" autocomplete="off" class="layui-input">
            </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">关注时间</label>
        <div class="layui-input-inline">
            <input name="times" id="rhaphp-time1" value="{$post.times|raw}" class="layui-input" placeholder="开始时间 到 结束时间" lay-key="17" type="text">
        </div>
    </div>

    <div class="layui-inline">
        <label class="layui-form-label">互动时间</label>
        <div class="layui-input-block">
            <input  name="need" {eq name="$post.need" value="1" } checked {/eq} lay-skin="primary" value="1" title="有效"  type="checkbox">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">性别：</label>
        <div class="layui-input-block">
            <input name="sex" {eq name="$post.sex" value="1" } checked {/eq} value="1" title="男" checked="" type="radio">
            <input name="sex" {eq name="$post.sex" value="2" } checked {/eq} value="2" title="女" type="radio">
            <input name="sex" {eq name="$post.sex" value="0" } checked {/eq} value="0" title="不限" type="radio">
        </div>
    </div>
    <div class="layui-inline">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn layui-btn-sm layui-btn-normal">
                <i class="layui-icon">&#xe615;</i>
                搜索</button>
        </div>
    </div>
</div>
</form>
<form class="layui-form" action="" style="padding: 0px 10px 0px 10px;">
<table class="layui-table" lay-skin="line">
    <colgroup>
        <col width="50">
        <col width="80">
        <col>
    </colgroup>
    <thead>
    <!--<tr>-->
    <!--<th>&nbsp;全部</th>-->
    <!--<th></th>-->
    <!--<th></th>-->
    <!--<th></th>-->
    <!--<th></th>-->
    <!--<th></th>-->
    <!--<th></th>-->
    <!--<th></th>-->
    <!--</tr>-->
    <tr>
        <th><input name="" lay-skin="primary" lay-filter="allChoose" type="checkbox"></th>
        <th></th>
        <th><a id="synselect" class="layui-btn layui-btn-sm" href="javascript:;">同步选中粉丝信息</a><a id="getAllFriend" class="layui-btn layui-btn-sm" href="javascript:;">同步全部粉丝</a></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    </thead>
    <tbody>
    {volist name="friendList" id="v"}
    <tr id="friend{$v.id}">
        <td><input name="openid" value="{$v.openid}" lay-skin="primary" type="checkbox"></td>
        <td>
            <div  style="padding: 1px; border: #e6e6e6 solid 1px; width:35px; float: left; ">
                <img class="form_logo" src="{$v.headimgurl}" width="35" height="35">
            </div>
        </td>
        <td colspan="4">
            {if condition="isset($v.remark) && !empty($v.remark)"}
            {$v.remark}（{$v.nickname}）
            {else/}
            {$v.nickname}
            {/if}
            <p style="padding-top: 5px;">
                {if condition="isset($v.tab_list) && !empty($v.tab_list)"}
                {volist name="v.tab_list" id="tab"}
                <span class="friend-tags">{$tab.name}</span>
                {/volist}
                {else/}
                无标签
                {/if}
            </p>
        </td>
        <td>关注：{$v.subscribe_time|date="Y-m-d"}</td>

        <td>
            {if condition="isset($v.remark) && !empty($v.remark)"}
            <a class="rha-bt-a" onclick="editMark('{$v.openid}','{$v.remark}')" href="javascript:;">修改备注</a>
            {else/}
            <a class="rha-bt-a" onclick="editMark('{$v.openid}','{$v.nickname}')" href="javascript:;">修改备注</a>
            {/if}
            <a class="rha-bt-a" onclick="selectTab('{$v.tagid_list}','{$v.openid}')" href="javascript:;">选择标签</a>
            <a class="rha-bt-a" href="{:url('Message/replyMsg',['openid'=>$v.openid])}">发送消息</a>
        </td>
    </tr>
    {/volist}
    </tbody>
</table>

</form>
<!--<div class="my-layer" style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 999;background:rgba(0,0,0,.5);">-->
<!--<div class="selected-tags" style="width: 200px;height: auto;padding: 10px;background: #ffffff;margin: 0 auto;margin-top: 200px;">-->
    <!--<span class="friend-tags">标签1</span>-->
    <!--<span class="friend-tags">标签1</span>-->
    <!--<span class="friend-tags">标签1</span>-->

<!--</div>-->
<!--</div>-->
{$friendList->render()|raw}


<script>
    layui.use('laydate', function() {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#rhaphp-time1'
            ,type: 'datetime'
            ,range: '到'
            ,format: 'yyyy-M-d'
        });
    })
    layui.use('form', function(){
        var $ = layui.jquery, form = layui.form;

        //全选
        form.on('checkbox(allChoose)', function(data){
            var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
            child.each(function(index, item){
                item.checked = data.elem.checked;
            });
            form.render('checkbox');
        });
    });
    layui.use('layer', function(){
        var $ = layui.jquery, layer = layui.layer;
        var  lastOpenid='';
        var page='1';
        $(function () {

            $('#getAllFriend').click(function () {
                //send(lastOpenid,page);
                layer.open({
                    type: 2,
                    title: '同步全部粉丝',
                    shadeClose: true,
                    shade: 0.5,
                    area: ['680px', '200px'],
                    content: '{:url("mp/Friends/SynFriends")}',
                    cancel: function(index, layero){
                        window.location.reload();
                    }
                });
            });
            function send (lastOpenid,page){
                $.post("{:url('mp/Friends/SynFriends')}",{'lastOpenid':lastOpenid,'page':page},function (result) {
                    console.log(result);
                    if(result.status==1){
                        layer.msg('正在同步第'+result.page+'页', {
                            icon: 16
                            ,shade: 0.01,
                            time:0,
                        });
                        send(result.lastOpenid,result.page)
                    }
                    if(result.status==2){
                      //  layer.close(index);
                        layer.alert('同步完成', {
                            skin: 'layui-layer-lan'
                            ,closeBtn: 0
                        });
                        location.reload()

                    }
                    if(result.status==0){
                        layer.alert(result.msg, {
                            skin: 'layui-layer-lan'
                            ,closeBtn: 0
                        });
                    }

                })
            }
            $('#synselect').click(function () {
               var openids=[];
                $("input[name='openid']:checked").each(function (key,value) {
                    openids[key]=$(this).val();
                })
                $.post("{:url('mp/Friends/SynSelect')}",{'openids':openids},function (result) {
                    layer.alert(result.msg, {
                        closeBtn: 0
                    });
                })
            })
        })
    });

    var tag_json = '{$tab_json|raw}';

    function selectTab(tab_str,fid){
        
        if(tag_json.length>0){
            var now_tags = [];
            if(tab_str.length>0){
                now_tags = JSON.parse(tab_str);
            }

            tag_json1 = JSON.parse(tag_json);
            var str = '<form class="layui-form" action="">';
            var checked = '';

            $.each(tag_json1,function (k,tag) {

                if($.inArray(tag.id,now_tags) >= 0 || $.inArray(tag.id.toString(),now_tags) >= 0){

                    checked = "checked = 'checked'";
                }else{
                    checked = '';
                }
                str += '<label style="display: inline-block;width:100px ;"><input type="checkbox" '+checked+' id="tag'+tag.id+'" name="select-tag[]" value="'+tag.id+'" title="'+tag.name+'" lay-skin="primary"></label>';
            });


            str+="</form>";
            layui.use(['layer','form'], function(){

                var layer = layui.layer;
                var title = '选择标签';

                layer.open({
                    'title':title,
                    content: str
                    ,btn: ['确认', '取消']
                    ,yes: function(index, layero){

                        var selected_tags = $('input[name="select-tag[]"]:checked');

                        var  selected_ids = '';
                        if(selected_tags.length > 0){
                            var selected_id_arr = [];
                            selected_tags.each(function () {
                                selected_id_arr.push($(this).val());
                            });
                            selected_ids = selected_id_arr.join(',');

                        }

                        $.post("{:url('editFriendTab')}",{tid:selected_ids,opid:fid},function (res) {
                            if(res.errcode == -1){
                                layer.msg(res.errmsg);
                            }else{
                               window.location.reload();
                            }

                        },'json')
                    }
                    ,btn2: function(index, layero){
                        layer.close(index);


                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                    ,cancel: function(){
                        //右上角关闭回调

                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                });
                var form=layui.form;
                form.render('checkbox');
            });

        }else{
            layer.msg("请创建标签");
        }
    }


    function editMark(openid,mark) {
        layui.use('layer', function(){

            var layer = layui.layer;
            //eg2
            var str = ' <div class="layui-input-inline">' +
                ' <input name="mark-name"  autocomplete="off" class="layui-input" type="input" id="mark-name" value="'+mark+'">' +
                '<div id="edit-error" style="color: red;"></div> '    +
                '</div>';

            var title = '修改备注';

            layer.open({
                'title':title,
                content: str
                ,btn: ['确认', '取消']
                ,yes: function(index, layero){
                    var tab_name = $('#mark-name').val();

                    if(tab_name.length > 30){
                        $('#edit-error').text('不得超过30个字符');
                        return;
                    }

                    $.post("{:url('editMark')}",{openid:openid,mark:tab_name},function (res) {
                        if(res.errcode == -1){
                            layer.msg(res.errmsg);
                        }else{
                          window.location.reload();
                        }

                    },'json')
                }
                ,btn2: function(index, layero){
                    layer.close(index);


                    //return false 开启该代码可禁止点击该按钮关闭
                }
                ,cancel: function(){
                    //右上角关闭回调

                    //return false 开启该代码可禁止点击该按钮关闭
                }
            });

        });
    }

    function getByteLen(val) {
        var len = 0;
        for (var i = 0; i < val.length; i++) {
            var a = val.charAt(i);
            if (a.match(/[^\x00-\xff]/ig) != null)
            {
                len += 2;
            }
            else
            {
                len += 1;
            }
        }
        return len;
    }
</script>

{/block}